<!-- 招聘页 -->
<template>
  <div>
    <template v-for="item in jobListData" :key="item.rid">
      <JobList :jobData="item" @click="viewDetail(item.rid)"></JobList>
    </template>
    <!-- 分页栏 -->
    <div class="pagination">
      <el-pagination background :default-page-size="listCount" layout="prev, pager, next" :total="totalCount"
                     @current-change="handleCurrentChange" />
    </div>
  </div>
</template>
<script setup>
import { inject, ref } from 'vue';
import { useRouter } from 'vue-router';
const $root = inject('$root')
const $axios = inject('$axios')
const router = useRouter()
import JobList from '@/components/jobList.vue'
//定义当前页
let currentPage
//定义总页数
let totalPage
//定义每页显示数据条数
let listCount = 3
//定义工作列表数据
let jobListData = ref([])
//定义总数据条数,默认0
let totalCount = ref(0)
//定义获取工作列表数据方法
function getPageData(pageNo = 1) {
  $axios.get($root + `/recruit/?page=${pageNo}&page_size=${listCount}`)
      .then(r => {
        if (r.data.code == 200) {
          totalCount.value = r.data.data.total_count
          jobListData.value = r.data.data.data
          totalPage = r.data.data.total_page
        }
      })
}
getPageData()
//分页栏功能
const handleCurrentChange = (e) => {
  if (currentPage <= 1 || currentPage >= totalPage) return
  getPageData(e)
}
//查看岗位详情
const viewDetail = (id) => {
  router.push('/jobDetail/' + id)
}
</script>
<style scoped>
.pagination {
  display: flex;
  justify-content: center;
  margin-top: 15px;
}
</style>
